<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>4.4 rem 弹性布局</title>

		<link rel="stylesheet" href="css/common.css">

		<style>
			.iconfont-cart::before {
				/* content: ''; */
				content: "\E60C";

			}
		</style>
	</head>
	<!-- 
 
	4-4 rem 弹性布局 
	
	布局特点 ： 
	为了保证在各种屏幕上不失真，就要根据实际屏幕宽度比例换算 
	
	一句话： 一套方案，使不同尺寸，分辨率的视口，都能呈现出比较好的效果。
 
 设计思路：  %， rem 作为单位
 -->
	<body>



		<div class="container">


			<div class="top">
				<img id="brand" src="img/brand.png" alt="" srcset="">
			</div>


			<div class="main">

				<ul>
					<li>
						<div>
							<img src="img/class-01.png" alt="" class="class-logo">
						</div>
						<div>快速掌握前端必会的 7 种设计模式</div>
						<div>
							<img src="img/short-cart2.png" alt="" class="shop-car">
						</div>
					</li>

					<li>
						<div>
							<img src="img/class-02.png" alt="" class="class-logo">
						</div>
						<div>产品经理电商系统实战，全面掌握前后端设计精髓目</div>
						<div>
							<img src="img/short-cart2.png" alt="" class="shop-car">
						</div>
					</li>


					<li>
						<div>
							<img src="img/class-03.png" alt="" class="class-logo">
						</div>
						<div>2022全新版-Java分布式架构设计与开发实战</div>
						<div>
							<img src="img/short-cart2.png" alt="" class="shop-car">
						</div>
					</li>


					<li>
						<div>
							<img src="img/class-04.png" alt="" class="class-logo">
						</div>
						<div>C/C++气象数据中心实战，手把手教你做工业级项目</div>
						<div>
							<img src="img/short-cart2.png" alt="" class="shop-car">
						</div>
					</li>

					<li>
						<div>
							<img src="img/class-04.png" alt="" class="class-logo">
						</div>
						<div>C/C++气象数据中心实战，手把手教你做工业级项目</div>
						<div>
							<img src="img/short-cart2.png" alt="" class="shop-car">
						</div>
					</li>


					<li>
						<div>
							<img src="img/class-04.png" alt="" class="class-logo">
						</div>
						<div>C/C++气象数据中心实战，手把手教你做工业级项目</div>
						<div>
							<img src="img/short-cart2.png" alt="" class="shop-car">
						</div>
					</li>

					<li>
						<div>
							<img src="img/class-04.png" alt="" class="class-logo">
						</div>
						<div>C/C++气象数据中心实战，手把手教你做工业级项目</div>
						<div>
							<img src="img/short-cart2.png" alt="" class="shop-car">
						</div>
					</li>
					<li>
						<div>
							<img src="img/class-04.png" alt="" class="class-logo">
						</div>
						<div>C/C++气象数据中心实战，手把手教你做工业级项目</div>
						<div>
							<img src="img/short-cart2.png" alt="" class="shop-car">
						</div>
					</li>
					<li>
						<div>
							<img src="img/class-04.png" alt="" class="class-logo">
						</div>
						<div>C/C++气象数据中心实战，手把手教你做工业级项目</div>
						<div>
							<img src="img/short-cart2.png" alt="" class="shop-car">
						</div>
					</li>
					<li>
						<div>
							<img src="img/class-04.png" alt="" class="class-logo">
						</div>
						<div>C/C++气象数据中心实战，手把手教你做工业级项目</div>
						<div>
							<img src="img/short-cart2.png" alt="" class="shop-car">
						</div>
					</li>

				</ul>



			</div>

			<div class="footer">
				<div><img src="img/home.png" alt="" srcset=""></div>
				<div><img src="img/short-cart2.png" alt="" srcset=""></div>

			</div>



		</div>



		<script src="js/main.js"></script>


	</body>
</html>
